import React, { useEffect } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  RouteObject,
} from "react-router-dom";
import { Tooltip, Image } from "antd";
import { debounce } from "lodash";
import useFrameStore from "@store/useframeStore";
import fasememoize from "fast-memoize";
import usepageStore from "./store/userPageDate";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NotFound from "./404";
import "./App.css";

const App = () => {
  const { updateWidth, updateHeight, width, height } = usepageStore();
  const { updateIsExpand, isExpand } = useFrameStore();
  const debUpdateIsExpand = debounce(updateIsExpand, 300);

  //#region 路由配置
  // 路由配置数组
  const routeConfig = [
    { path: "/", element: <Home /> },
    { path: "/about", element: <About /> },
    { path: "/contact", element: <Contact /> },
    { path: "*", element: <NotFound /> },
  ];

  const buttonImg = [
    {
      title: "消息",
      img: "https://img.huahuabiz.com/user_files/20231220/1703071642445920.png",
      onClick: () => {
        debUpdateIsExpand(!isExpand);
      },
    },
    {
      title: "ai",
      img: "https://img.huahuabiz.com/user_files/20241120/1732100653935883.png",
    },
  ];

  const getRouter = (item: RouteObject) => {
    if (item.children) {
      return (
        <Route key={item.path} path={item.path} element={item.element}>
          {item.children.map((child) => getRouter(child))}
        </Route>
      );
    }

    return <Route key={item.path} path={item.path} element={item.element} />;
  };
  //#endregion

  //#region 监听视口大小变化存入store里面
  const handleResize = () => {
    updateWidth(window.innerWidth);
    updateHeight(window.innerHeight);
  };

  useEffect(() => {
    handleResize();
    const fmeHandleResize = fasememoize(handleResize);
    const debHandleResize = debounce(fmeHandleResize, 300);
    window.addEventListener("resize", debHandleResize);

    return () => {
      window.addEventListener("resize", debHandleResize);
    };
  }, []);
  //#endregion

  return (
    <Router>
      <div className="bigbox">
        <div className="flexbox">
          <div
            className="leftBox"
            style={{
              width: isExpand ? "auto" : "0px",
              visibility: isExpand ? "visible" : "hidden",
              opacity: isExpand ? "1" : "0",
              transition: "width 0.5s ease, opacity 0.5s ease",
            }}
          >
            <Link to="/">Home</Link> | <Link to="/about">About</Link> |{" "}
            <Link to="/contact">Contact</Link>|<Link to="/404">404</Link>
          </div>
          <div className="rightBox">
            <div>
              width: {width}, height: {height}, isExpand: {isExpand.toString()}
            </div>
            {/* 定义路由 */}
            <Routes>{routeConfig.map((item) => getRouter(item))}</Routes>
          </div>
        </div>
        <div className="bottomBox">
          {buttonImg.map((item) => (
            <Tooltip placement="top" title={item.title}>
              <div style={{ margin: "0 10px" }} onClick={item.onClick}>
                <Image width={44} height={44} src={item.img} preview={false} />
              </div>
            </Tooltip>
          ))}
        </div>
      </div>
    </Router>
  );
};

export default App;
